<template>
  <div class="bg">
    <div class="image-container">
      <img :src="currentImage" alt="Random Image" class="character-image">
    </div>
    <div class="txt">{{theMsg}}</div>
    <div class="next"><router-link to="/game"><img src="../assets/images/img04.png" alt=""></router-link></div>
  </div>
</template>
<script>
export default {
  name: 'text',
  data() {
    return {
      msg: [
  [
    "在月光的掩护下，她轻声说：‘我们之间的秘密，就像这夜一样深邃，让人着迷。’",
    "她的指尖轻轻划过屏幕，眼神中透露着神秘：‘有些话，只对你一个人说，你准备好了吗？’",
    "她轻轻笑着，‘我们的故事，就像这未完的章节，让人期待又紧张，不是吗？’",
    "她的眼神中藏着星星，低语：‘在这个世界里，只有我们能听到彼此的心跳。’"
  ],
  [
    "她的声音在耳边低语：‘如果可以，我希望能成为你心中不可忽视的存在。’",
    "她的眼神温柔而坚定：‘有些话，藏在心里，却在指尖泄露了秘密。’",
    "她微笑着，仿佛藏着无尽的秘密：‘我们的每一次交谈，都像是一次心跳的加速。’",
    "她轻声说：‘在你身边，我愿意放下所有的伪装，做最真实的自己。’"
  ],
  [
    "她轻触你的手，眼神中满是期待：‘我们之间的距离，似乎在不知不觉中缩短了。’",
    "她的眼神迷离，声音轻柔：‘每当你靠近，我的世界就变得如此不同。’",
    "她轻声说：‘在这个虚拟的世界里，我们的心却如此真实地触碰。’",
    "她看着你，眼神中藏着笑意：‘你的一言一行，都让我心跳加速。’"
  ],
  [
    "她低语：‘在这个无人知晓的角落，我们的秘密正悄悄绽放。’",
    "她的眼神中藏着不为人知的温柔：‘有些话，只能在无人的夜晚说给你听。’",
    "她轻声笑，‘我们的故事，就像这未完的夜，充满了未知和惊喜。’",
    "她的眼神中藏着秘密：‘我们的每一次相遇，都像是命运的安排。’"
  ],
  [
    "她的眼神中藏着无尽的柔情：‘在这片星空下，只有你和我，还有我们共享的秘密。’",
    "她轻声说：‘在我们之间，有些话不必说出口，眼神已经足够。’",
    "她微笑着，‘在这个世界上，有你的地方，就是我的归宿。’",
    "她的眼神里藏着星光：‘你的一言一行，都让我感到无比安心。’",
    "她轻声说：‘在你身边，我愿意卸下所有防备，做最真实的自己。’"
  ]
],
      images : [
        'https://i-blog.csdnimg.cn/direct/36098062d927479d839ac7ebbcf0c6b3.jpeg',
        'https://i-blog.csdnimg.cn/direct/cb805ba758f448d29326246cd7db8244.jpeg',
        'https://i-blog.csdnimg.cn/direct/78092b189682489fa8bd78a33fafc5d7.jpeg',
        'https://i-blog.csdnimg.cn/direct/05cfffad9ef841e7ac95de2b01cd036f.jpeg',
        'https://i-blog.csdnimg.cn/direct/441dd715916e4cae957960013eb0365d.jpeg',
        'https://i-blog.csdnimg.cn/direct/3dc5b782df8346d183b90e218aac1d21.jpeg',
        'https://img-blog.csdnimg.cn/direct/491da0470ebf46ef9854142c0f5d18d0.png',
        'https://img-blog.csdnimg.cn/direct/9ccf9d15c69642f4bc4d750b1f49f52d.png',
        'https://img-blog.csdnimg.cn/direct/d9147f8730b043e882e551322b81c0ea.png',
        'https://img-blog.csdnimg.cn/direct/c404181d2cf04f30ab37d5d1d98b6961.png',
        'https://img-blog.csdnimg.cn/direct/ec237ca869824515be0ee22de6688a64.png',
        'https://img-blog.csdnimg.cn/direct/bc2f7b206e4b42f7aef03b263e53a12a.png'
      ],
      num: 0,
      stage: 0,
      theMsg: '',
      currentImage: ''
    };
  },
  mounted() {
    this.showRandomImage();
    this.handleStoreData();
  },
  methods: {
    showRandomImage() {
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    },
    handleStoreData() {
      if (this.$store) {
        this.stage = this.$store.state.stage;
        this.num = this.$store.state.num;
        this.theMsg = this.msg[this.stage - 1][this.num - 1]; // 确保stage和num的值在数组范围内
      }
    }
  },
  beforeMount(){
    this.stage = this.$store.state.stage
    this.num = this.$store.state.num
    this.theMsg = this.msg[this.stage - 1][this.num - 1]
  }
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-color: #343a40; /* 深色调背景 */
  color: #f8f9fa; /* 淡色调文字 */
  font-family: 'Comic Sans MS', cursive, sans-serif; /* 更加柔和的字体 */
  position: relative;
}

.bg img {
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 修正位置偏移 */
  width: 90%; /* 调整宽度，根据实际情况调整百分比 */
  height: auto; /* 高度自动调整，保持宽高比 */
  object-fit: contain; /* 保持宽高比，使图片完整显示 */
}

.image-container {
  position: absolute;
  top: 20px; /* 调整位置 */
  right: 20px;
  width: 50%; /* 调整宽度 */
  height: 60%; /* 调整高度 */
}

.character-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充整个容器 */
  border-radius: 10px; /* 边缘圆润 */
}

.txt {
  position: absolute;
  bottom: 20px; /* 文字放在底部 */
  left: 20px;
  width: 40%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  border-radius: 15px;
  font-size: 1.2rem;
  line-height: 1.5;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* 阴影效果 */
}

.next {
  width: 4.875rem;
  position: absolute;
  right: 1.5rem; /* 减少right的值，避免超出屏幕 */
  bottom: 1.5rem; /* 使用bottom代替top，并且调整值 */
}

.next:hover {
  transform: scale(1.1);
}
</style>